@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?2r4kej');
  src:  url('../fonts/icomoon.eot?2r4kej#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?2r4kej') format('truetype'),
    url('../fonts/icomoon.woff?2r4kej') format('woff'),
    url('../fonts/icomoon.svg?2r4kej#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  /* 
body{
解除右测滚动条对元素宽度的影响
  margin-right: calc(100% - 100vw);
}
 */
*{
  margin: 0;
  padding: 0;
}
.w{
  width: 1200px;
  margin: 0 auto;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
/* 快捷导航模块 */
.shortcut{
  height: 31px;
  line-height: 31px;
  font-size: 12px;
  background-color: #f1f1f1;
  margin-bottom: 64px;
}
.font-red{
  color: #c81623;
}
.shortcut  ul li{
  float: left;
  font-size: 12px;
  list-style: none;
}

/* fr-nav 下拉框的实现  start*/
.shortcut .fr #fr-nav{
  height: 31px;
  overflow: hidden;
}
.shortcut .fr #fr-nav:hover{
  height: 91px;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0.1);
}
.shortcut .fr #fr-nav dl dt a{
  height: 30px; 
  display: block;
  text-align: center;
}

.shortcut .fr #fr-nav dl dd a{
  height: 30px; 
  display: block;
  text-align: center;
  margin: 0 auto;
}

.shortcut .fr #fr-nav dl dd a::after{
  content: "";
}
/* fr-nav 下拉框的实现  end*/


.shortcut .fr ul li a{
  display: block;
  height: 31px;
  line-height: 31px;
  padding: 0px 13px;

}

.shortcut .fr ul li a::after{
  content: "\e90d";
  font-family: 'icomoon';
  margin-left: 5px;
}

.shortcut .fr ul li a:hover{
  background-color: rgba(0, 0, 0, 0.1);
}
.shortcut .fr ul li:nth-child(even){
  margin: 9px 5px 0px;
  height: 13px;
  border: 1px #666 solid;
}
/* 
.arrow-icon::after{
  content: "\e90d";
  font-family: 'icomoon';
  margin-left: 0px;
} */


/* header模块的内容 */
.header{
  height: 107px;
  position: relative;
}

.header .logo{
  /* float: left;
  margin: 15px 0px; */
  width: 180px;
  height: 64px;
  background-color: aquamarine;
  position: absolute;
  top: 15px;
}

.header .logo a{
  display: block;
  width: 180px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  text-decoration: none;
  background-image: url(../images/logo.png);

  /* 使文字不显示 */
  /* font-size: 0;  京东的做法 */
  /* 淘宝的做法 */
  /* text-indent: -1000px;
  overflow: hidden; */
}

.search{
  width: 538px;
  height: 36px;
  border: 2px red solid;
  position: absolute;
  left: 329px;
  top: 24px;
  /* box-sizing: border-box; */
}


/* 两个input标签是行内元素，中间有间隔，所以加浮动就不会被占用 */

.search input[type=search]{
  float: left;
  width: 454px;
  height: 32px;
  border: 0;
  /* 取消点击聚焦的边框 */
  outline: none;
  padding-left: 10px;
}

.search input[type=submit]{
  float: left;
  height: 32px;
  width: 80px;
  font-size: 16px;
  color: #fff;
  border: 0;
  /* 取消点击聚焦的边框 */
  outline:none;
  background-color: #b1191a;
  /* 谁过度给谁加 */
  transition: all 1s ease 0s;
}

.search input[type=submit]:hover{
  color: red;
  background-color: rgba(0, 0, 0, 0.1);
}

/* keyword模块 */
.hotwords{
  width: 538px;
  height: 23px;
  position: absolute;
  top: 64px;
  left: 329px;
}
.hotwords a{
  float: left ;
  display: block;
  padding: 0px 10px;
  height: 23px;
  font-size: 12px;
  text-align: center;
  line-height: 23px;
}

/* 购物车模块 */
.purch{
  width: 140px;
  height: 36px;
  line-height: 36px;
  text-align: center; 
  background-color: #f7f7f7;
  border: 1px #dfdfdf solid;
  z-index: 1;
  position: absolute;
  top: 24px;
  right: 64px;
}
.purch button{
  width: 138px;
  height: 34px;
  border: 0;
  transition: all 0.5s ease 0s;
}
.purch button:hover{
  font-size: 14px;
  box-shadow: 2px 2px 5px #666;
}
.purch button p{
  height: 16px;
}
.purch button p::after{
  content: "\e90f";
  font-family: 'icomoon';
  margin-top: 1px;
  margin-left: 5px;
}
.purch button p::before{
  content: "\e913";
  color: #c81623;
  font-family: 'icomoon';
  margin-right: 5px;
}
.count{
  position: absolute;
  top: -5px;
  left: 100px;
  height: 15px;
  line-height: 15px;
  border-radius: 7px 7px 7px 0px;
  color: #fff;
  background-color: #c81623;
  z-index: 2;
}

  /* <!-- nav模块  start --> */
  .nav{
    height: 47px;
    /* background-color: #666; */
    border-bottom: 2px solid #b1191a;
    position: relative;
  }
  .nav .dropdown{
    width: 210px;
    height: 45px;
    float: left;
    background-color: #b1191a;
    position: absolute;
    overflow: hidden;
    transition: all 1s ease 0s;
  }
    /* 下拉框 */
  .nav .dropdown:hover{
    overflow: visible;
    height: 510px;
    /* height: 386px; */
  }


  .nav .dropdown .dt{
    width: 210px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #b1191a;
  }

    .nav .dropdown .dd ul li{
      width: 208px;
      height: 31px;
      padding-left: 10px;
      line-height: 31px;
      margin-left: 2px;
      font-size: 14px;
      background-color: #c81623;
      color: #fff;
      position: relative;
    }
    .nav .dropdown .dd ul li a{
      display: inline-block;
      color: #fff;
    }
    .nav .dropdown .dd ul li a::after{
      position: absolute;
      right: 10px;
      top: 0px;
      content: "\e90f";
      font-family: 'icomoon';
    }
    /* .nav .dropdown .dd ul li a:hover{
      text-decoration:2px solid #666 ;
    } */
    .nav .dropdown .dd ul li:hover{
      background-color: #fff;
      color: #c81623;
    }
    .nav .dropdown .dd ul li:hover a{
      color: #c81623;
    }




    /* navitem模块 start*/
    .nav .navitem{
      float: right;
      width: 991px;
      height: 45px;
      padding-left: 15px;
    }

    .nav .navitem ul a{
      display: inline-block;
      height: 45px;
      padding: 0 25px;
      line-height: 45px;
      text-align: center;
      font-size: 16px;
    }
    .nav .navitem ul a:hover{
      background-color: rgba(0, 0, 0, 0.1);
      border-bottom: 2px solid #c81623;
    }



/* 底部模块footer  start */

.footer{
  padding-top: 30px;
  height: 415px;
  background-color: #f5f5f5;
}

.footer .mod_service{
  height: 80px;
  border-bottom: 1px solid #ccc;
}

.footer .mod_service ul li{
  float: left;
  width: 240px;
  height: 50px;
  padding-left: 35px;

}
.footer .mod_service ul li h5{
  float: left;
  height: 50px;
  width: 50px;
  background-color: #c81623;
  margin-right: 8px;
  border-radius: 45px;
}
.footer .mod_service ul li h5 img{
  margin: 10px;
  width: 30px;
  height: 30px;
}

.service_txt h3{
  margin-top: 5px;
  font-size: 16px;
  color: #333;
}
.service_txt p{
  font-size: 12px;
  color: #666;
}

.footer .mod_help{
  height: 188px;
  border-bottom: 1px solid #ccc;
}

.footer .mod_help ul li{
  display: block;
  float: left;
  width: 200px;
  height: 188px;
  /* background-color: rgb(19, 80, 80);   */
}

.footer .mod_help ul li .dl{
  width: 200px;
  height: 188px;
  padding-left: 50px;
  padding-top: 20px;
  text-align: left;
}
.footer .mod_help ul li .dl dt{
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
.footer .mod_help ul li .dl dd{
  font-size: 12px;
  color: #666;
}
.footer .mod_help ul li .dl dd a{
  display: block;
  padding: 1px 0px;
}
.footer .mod_help ul li .dl .dd{
  width: 90px;
  height: 90px;
  background-image: url(../images/footer_help.png);
  background-size: cover;
}

.footer .mod_explaim{
  height: 117px;
  /* background-color: #c81623; */
}

.footer .mod_explaim .explaim_more{
  height: 30px;
  padding-left: 100px;
  margin-top: 20px;
  /* background-color: #c81623; */
}
.footer .mod_explaim .explaim_more ul li{
  display: block;
  font-size: 12px;
  float: left;
  margin: 0 2px;
}
.footer .mod_explaim .explaim_more ul li:nth-of-type(odd){
  height: 30px;
  line-height: 30px;
  display: block;
  padding: 0px 10px;
  /* background-color: #19ec58; */
}

.footer .mod_explaim .explaim_more ul li:nth-of-type(even){
  margin: 9px 2px;
  height: 12px;
  width: 0;
  border: 1px solid #666;
}
.footer .mod_explaim .explaim_address{
  height: 20px;
  margin-top: 10px;
  text-align: center;
}



